import React, { Component } from 'react';
import { Divider, Tooltip } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import moment from 'moment';

const { Description } = DescriptionList;
class ContactPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contactList: [],
      dataArr: [],
      flag: false,
    };
  }

  static getDerivedStateFromProps(nextProps) {
    if ('contactList' in nextProps) {
      return {
        contactList: nextProps.contactList,
        dataArr: JSON.parse(JSON.stringify(nextProps.contactList)).splice(0, 5),
      };
    }
    return null;
  }

  loadingMore = flag => {
    this.setState({
      flag: !flag,
    });
  };

  render() {
    const { dimDetail } = this.props;
    const { dataArr, flag, contactList } = this.state;

    return (
      <div>
        {(flag ? contactList : dataArr).map((item, i) => (
          <div key={item.contactTime}>
            <DescriptionList>
              <Description term="联系方式">{item.contactWayName}</Description>
              {dimDetail ? (
                <Description term="联系电话">{item.contactValue}</Description>
              ) : (
                <Description term={Number(item.contactWay) === 3 ? '邮箱' : '联系电话'}>
                  {item.contactNo}
                </Description>
              )}
              <Description term="联系人">{item.creName}</Description>
              <Description term="联系时间">
                {item.contactTime ? moment(item.contactTime).format('YYYY-MM-DD HH:mm:ss') : null}
              </Description>
              <Description term="联系内容">
                <Tooltip placement="topRight" title={dimDetail ? item.remark : item.content}>
                  <span
                    style={{    
                    WebkitBoxOrient: 'vertical',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    overflow: 'hidden',
                    wordBreak: 'break-all',
                    width: '200px',
                    display: 'inline-block',
                    cursor: 'pointer',
                    verticalAlign: '-5px',
                    margin: 0,
                  }}
                    dangerouslySetInnerHTML={{ __html: dimDetail ? item.remark : item.content }}
                  />
                </Tooltip>
              </Description>
              {item.againFlagName ? (
                <Description term="是否再次联系">{item.againFlagName}</Description>
              ) : null}
              {Number(item.againFlag) === 1 ? (
                <Description term="再次联系时间">
                  {item.againTime ? moment(item.againTime).format('YYYY-MM-DD') : '--'}
                </Description>
              ) : null}
            </DescriptionList>
            {(flag ? contactList : dataArr).length === i + 1 ? null : <Divider dashed />}
          </div>
        ))}
        <p
          style={{
            width: 132,
            height: 28,
            textAlign: 'center',
            border: '1px solid #ccc',
            margin: '10px auto 0',
            lineHeight: '26px',
            cursor: 'pointer',
            borderRadius: '4px',
          }}
          onClick={() => this.loadingMore(flag)}
        >
          <span>{flag ? '收起' : '加载更多'}</span>
        </p>
      </div>
    );
  }
}

export default ContactPage;
